<template>
  <div :id="props.id"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, computed, ref } from "vue";
const props = defineProps({
  text2: {
    type: String,
    default: "",
  },
  text3: {
    type: String,
    default: "",
  },
  id: {
    type: String,
    default: "",
  },
  info: {
    type: Object,
    default: {},
  },
  data: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

const text1 = ref("");
onMounted(() => {
  if (props.data.length > 0) {
    let num = 0;
    props.data.forEach((item) => {
      num += item.value;
    });
    text1.value = num + props.text3;
    // text1.value = props.data.reduce((pre, cur) => {
    //   console.log(cur,pre);
    //   return pre.value + cur.value;
    // },0)+props.text3;
    // text1.value = props.data[0].value + props.data[1].value + "个";
  }

  var chartDom = document.getElementById(props.id);
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {
      trigger: "item",
    },

    legend: {
      top: props.id === "sjzt" ? "40%" : props.id === "khqf" ? "35%" : "30%",
      right: props.id === "sjzt" ? "10%" : "5%",
      orient: "vertical",
      icon: "rect",
      formatter: function (name, value) {
        const item = option.series[0].data.find((item) => item.name === name);

        return name + "  " + item.value + props.text3;
      },
      textStyle: {
        color: "rgba(255, 255, 255)",
      },
    },
    grid: {
      left: 0,
      right: "0",
      bottom: "0",
      containLabel: true,
    },
    series: [
      {
        type: "pie",
        radius: ["60%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
          normal: {
            show: true,
            position: "center",
            color: "#fff",
            formatter:
              "{total|" +
              text1.value +
              "}" +
              "\n\r" +
              " {active|" +
              props.text2 +
              "}",
            rich: {
              total: {
                fontSize: 35,
                fontFamily: "微软雅黑",
                color: "#fff",
              },
              active: {
                fontFamily: "微软雅黑",
                fontSize: 16,
                color: "#fff",
                lineHeight: 30,
              },
            },
          },
          emphasis: {
            //中间文字显示
            show: true,
          },
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        center: ["30%", "50%"],

        data: props.data,
      },
    ],
  };

  option && myChart.setOption(option);
});
</script>

<style scoped>
#khqf,
#sjzt,
#khsl {
  width: 100%;
  height: 300px;
}
</style>
